<template>
  <section class="todoapp">
    <!-- 头部组件 -->
    <todo-header @submitTask="sub"></todo-header>

    <!-- 主体组件 -->
    <todo-main
      :list="showList"
      @handlechange="hChangeTask"
      @delete="handleDel"
    ></todo-main>

    <!-- 底部组件 -->
    <todo-footer
      :list="showList"
      @handleTab="changeTab"
      @clean="cleanTask"
    ></todo-footer>
  </section>
</template>

<script>
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  data() {
    return {
      // list: [
      //   { id: 1, name: "吃饭", isDone: true },
      //   { id: 2, name: "睡觉", isDone: false },
      //   { id: 3, name: "打豆豆", isDone: true },
      // ],
      // list数组直接从本地存储中获取, 如果没有值就赋值为空数组; 
      // JSON中数据格式为字符串, 所以空数组需要加引号
      list: JSON.parse(localStorage.getItem('todoListFour') || '[]'),
      status: "all",
    };
  },
  methods: {
    // 子传父事件处理函数
    hChangeTask(id) {
      // 使用find方法获取id对应的数据, 将isDone状态取反
      const item = this.list.find((item) => item.id === id);
      item.isDone = !item.isDone;
    },
    // 删除事件: 获取子组件传入的id, 使用数组findIndex方法, 将对应下标的数据删除
    handleDel(id) {
      this.list.splice(
        this.list.findIndex((item) => item.id === id),
        1
      );
    },
    // 添加事件
    sub(val) {
      this.list.unshift({ id: +new Date(), name: val, isDone: false });
    },
    // tab栏切换事件:
    changeTab(type) {
      this.status = type;
    },
    // 底部清空已完成: 筛选出未完成的数据
    cleanTask() {
      this.list = this.list.filter(item => !item.isDone)
    }
  },
  // 定义计算属性: 根据子组件传过来的tpye值, 进行筛选数组, 并将筛选过后的数据传给子组件渲染到页面
  computed: {
    showList: {
      set(val) {
        console.log(val);
      },
      get() {
        if (this.status === "on") {
          return this.list.filter((item) => !item.isDone);
        } else if (this.status === "done") {
          return this.list.filter((item) => item.isDone);
        } else {
          return this.list;
        }
      },
    },
  },
  // 定义watch监听器: 当数据发生变化时, 将数据存到本地存储中
  watch: {
    list: {
      // immediate: true/false,  // 是否立即执行
      deep: true,  // 开启深度侦听
      handler(newVal) {  // 有两个参数, 一个是新值一个是旧值
        localStorage.setItem('todoListFour', JSON.stringify(this.list))
      }
    }
  }
};
</script>

<style>
</style>
